<template>
	<view class="oprofit-index" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/shop_uniapp/extension/order_bg.png') + ')' }">
		<view class="oprofit-select">
			<picker class="selected" @change="bindShopPickerChange" :value="shopPicker.index" :range="shopPicker.arr">
				<view class="uni-input">{{shopPicker.name}}</view>
				<image class="selected-right" :src="$util.img('/upload/uniapp/shop_uniapp/extension/order_jt.png')" mode=""></image>
			</picker>
		</view>
		<!-- 列表数据 -->
		<mescroll-uni class="list-wrap" @getData="getListData" top="120" refs="mescroll" :size="10">
			<block slot="list">
				<view v-if="profit_list.length > 0">
					<view class="oprofit-box" v-for="(items,index) in profit_list" :index="index">
						<view class="flex-col-start">
							<image class="shop-logo" :src="$util.img('/upload/uniapp/shop_uniapp/extension/order_shop.png')" mode=""></image>
							<view class="shop-name">{{items.site_name}}</view>
						</view>
						<view class="shop-acount">商家账号：{{items.username}}</view>
						<view class="shop-time">支付时间：{{items.date}}</view>
						<view class="shop-abs">
							<view class="shop-money">¥{{items.settlement_money}}</view>
							<view class="shop-type">{{items.type}}</view>
						</view>
						
						<view class="shop-task" v-for="(order,key) in items.shop_order" :index="key">
							<view class="task-list">
								<view class="flex-col-between">
									<view class="task-left flex-col-start">
										<image class="task-image" :src="$util.img('/upload/uniapp/shop_uniapp/extension/order_shop.png')" mode=""></image>
										<view class="task-show">
											<view class="task-name">{{order.config_name || '商户续费'}}</view>
											<view class="task-num" v-if="order.config_value">{{order.real_value}}/{{order.config_value}}</view>
										</view>
									</view>
									<view class="task-right">
										<view class="task-btn c-btn">{{order.is_settlement}}</view>
										<view class="task-price c-price">¥{{order.settlement_money}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>	
				</view>
				<ns-empty v-else text="暂无推荐佣金记录"></ns-empty>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
					site_id: 0,
					site_name: '全部推荐商家'
				}],
				shopPicker: {
					index: 0,
					name: '全部推荐商家',
					arr: [],
				},
				profit_list: [],
				subordinate_site_id: 0
			}
		},
		methods: {			
			bindShopPickerChange(e) {
				if (this.shopPicker.arr.length == 0) return;
				this.shopPicker.index = e.target.value;				
				this.subordinate_site_id = this.shopList[this.shopPicker.index].site_id;
				this.shopPicker.name = this.shopList[this.shopPicker.index].site_name;
				this.profit_list = [];
				this.mescroll.resetUpScroll();
			},
			getShopList() {
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getSubordinateShop',
					data: {},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							this.shopList = this.shopList.concat(res.data);
							this.shopList.forEach((item, key) => {
								this.shopPicker.arr.push(item.site_name);
								if (this.subordinate_site_id == item.site_id) {
									this.shopPicker.index = key;
									this.shopPicker.name = item.site_name;
								}
							});
						}
					}
				});
			},
			getListData(mescroll) {
				let data = {
					page_size: mescroll.size,
					page: mescroll.num,
					subordinate_site_id: this.subordinate_site_id
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getCommission',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({ title: msg });
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.profit_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});						
						
						this.profit_list = this.profit_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		},
		onLoad(e) {
			if (e.subordinate_site_id) {
				this.subordinate_site_id = e.subordinate_site_id;
			}
			this.getShopList();
		}
	}
</script>

<style lang="scss">
.oprofit-index {
	background-size: 750upx 1206px;
	background-repeat: no-repeat;
	background-position: left top;
	
	width: 100%;
	height: 100vh;
	background: #F8F8F8;
	overflow: hidden;
	
	.oprofit-select {
		width: 660upx;
		height: 70upx;
		line-height: 70upx;
		background: #FFFFFF;
		border-radius: 35upx;
		margin: 30upx;
		padding-left: 30upx;
		
		.selected {
			position: relative;
			height: 70upx;
			.selected-right {
				position: absolute;
				top: 15upx;
				right: 30upx;
				width: 40upx;
				height: 40upx;
			}
		}
		.uni-input {
			line-height: 70upx;
		}
	}

	.oprofit-box {
		position: relative;
		width: 630upx;
		// height: 580upx;
		background: #FFFFFF;
		border-radius: 8upx;
		margin: 0 30upx 20upx 30upx;
		padding: 30upx;
		
		.shop-logo {
			width: 40upx;
			height: 40upx;
		}
		.shop-name {
			height: 40upx;
			font-size: 28upx;
			color: #303133;
			line-height: 40upx;
		}
		.shop-abs {
			position: absolute;
			right: 30upx;
			top: 30upx;
			text-align: right;
			
			.shop-money {
				height: 50upx;
				font-size: 36upx;
				color: #FF6A00;
				line-height: 50upx;
			}
			.shop-type {
				height: 34upx;
				font-size: 24upx;
				color: #909399;
				line-height: 34upx;
			}
		}
	 .shop-acount {
			margin-top: 30upx;
			height: 34upx;
			font-size: 24upx;
			color: #909399;
			line-height: 34upx;
		}
		.shop-time {
			margin-top: 12upx;
			height: 34upx;
			font-size: 24upx;
			color: #909399;
			line-height: 34upx;
		}
		
		.task-list {
			margin-top: 30upx;
			padding: 30upx 0;
			border-bottom: 1upx solid #DBDBDB;
			&:last-child {
				border: none;
			}
			
			.task-image {
				width: 70upx;
				height: 70upx;
			}
			.task-show {
				margin-left: 20upx;
				
				.task-name {
					height: 40upx;
					font-size: 28upx;
					color: #303133;
					line-height: 40upx;
				}
				.task-num {
					margin-top: 12upx;
					height: 33upx;
					font-size: 24upx;
					color: #909399;
					line-height: 33upx;
				}
			}
			
			.task-right {				
				.task-btn {
					width: 108upx;
					height: 44upx;
					border-radius: 25upx;
					border: 1upx solid #D8D8D8;
					font-size: 24upx;
					color: #808080;
					text-align: center;
				}
				.c-btn {
					color: #FF6A00;
					border: 1px solid #FF6A00;
				}
				.task-price {
					margin-top: 11upx;
					height: 33upx;
					font-size: 24upx;
					color: #909399;
					line-height: 33upx;
					// width: 108upx;
					text-align: center;
				}
				.c-price {
					color: #FF6A00;
				}
			}
			
		}
		
	}
}
</style>
